<template>
  <div class="container">
    <h3>{{ type == 1 ? "新增地址" : "编辑地址" }}</h3>
    <el-divider></el-divider>
    <!-- 编辑内容 -->
    <div class="content">
      <div class="person item">
        <section class="header">联系人</section>
        <section class="text">
          <el-input v-model="person" placeholder="请输入内容"></el-input>
        </section>
      </div>
      <div class="person item">
        <section class="header">联系方式</section>
        <section class="text">
          <el-input
            maxlength="11"
            v-model="tel"
            placeholder="请输入内容"
          ></el-input>
        </section>
      </div>
      <div class="person item">
        <section class="header">所在地区</section>
        <section class="text">
          <span @click="dialogFormVisible = true">{{
            address || "选择地区"
          }}</span>
        </section>
      </div>
      <div class="person item">
        <section class="header">详细地址</section>
        <section class="text">
          <el-input v-model="addressInfo" placeholder="请输入内容"></el-input>
        </section>
      </div>
    </div>
    <div class="new_address">
      <el-button
        type="warning"
        round
        size="medium"
        @click="newAddress()"
        v-if="type == 1"
        >提交</el-button
      >
      <el-button
        type="warning"
        round
        size="medium"
        @click="eidtAddress()"
        v-else
        >提交</el-button
      >
    </div>

    <el-dialog
      title="修改收货地址"
      :visible.sync="dialogFormVisible"
      width="500px"
    >
      <el-form>
        <el-cascader
          size="large"
          :options="options"
          v-model="selectedOptions"
          @change="handleChange"
        >
        </el-cascader>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { regionData, CodeToText } from "element-china-area-data";
import { get_data } from "../../utils/utils";

export default {
  name: "addressAdimin", //地址管理
  data() {
    return {
      person: "",
      tel: "",
      address: "",
      addressInfo: "",
      selectedOptions: [],
      userInfo: {},
      options: regionData,
      dialogFormVisible: false,
      type: 1, //1 新增  2 编辑
      id: 0, //收货地址id
    };
  },
  mounted() {
    this.userInfo = JSON.parse(get_data("userInfo"));
    let url = this.$route.query;
    this.type = url.type;
    if (url.type == 2) {
      this.person = url.person;
      this.tel = url.tel;
      this.address = url.address;
      this.addressInfo = url.addressInfo;
      this.id = url.id;
    }
  },
  methods: {
    handleClose() {
      this.dialogFormVisible = false;
    },
    eidtAddress() {
      //编辑模式
      if (
        this.userInfo.id &&
        this.addressInfo.trim() &&
        this.person.trim() &&
        this.tel.trim() &&
        this.address.trim() &&
        this.id
      ) {
        if (!/^1\d{10}$/.test(this.tel)) {
          this.$message("手机号输入有误");
          return;
        }
        this.$http
          .fetch(this.$apiPath.editAddress, {
            method: "POST",
            data: {
              customerId: this.userInfo.id,
              consigneeAddress: this.addressInfo,
              consigneeName: this.person,
              consigneeTele: this.tel,
              mapAddress: this.address,
              id: this.id,
              defaultStatus: 0,
            },
          })
          .then((res) => {
            if (res.code == 200) {
              this.$message("编辑地址成功 ");
              this.$router.go(-1);
            }
          });
      } else {
        this.$message("请先完成您的信息");
      }
    },
    newAddress() {
      if (
        this.userInfo.id &&
        this.addressInfo.trim() &&
        this.person.trim() &&
        this.tel.trim() &&
        this.address.trim()
      ) {
        if (!/^1\d{10}$/.test(this.tel)) {
          this.$message("手机号输入有误");
          return;
        }
        this.$http
          .fetch(this.$apiPath.newAddressc, {
            method: "POST",
            data: {
              customerId: this.userInfo.id,
              consigneeAddress: this.addressInfo,
              consigneeName: this.person,
              consigneeTele: this.tel,
              mapAddress: this.address,
            },
          })
          .then((res) => {
            if (res.code == 200) {
              this.$message("新增地址成功");
              this.$router.go(-1);
            }
            this.addressData = res.data;
          });
      } else {
        this.$message("请先完成您的信息");
      }
    },
    handleChange(value) {
      this.address =
        CodeToText[value[0]] +
        "/" +
        CodeToText[value[1]] +
        "/" +
        CodeToText[value[2]];
      this.selectedOptions = value;
      this.dialogFormVisible = false;
    },
  },
};
</script>

<style scoped lang="less">
.container {
  width: 1200px;
  padding-top: 40px;
  margin: auto;
  .content {
    .item {
      display: flex;
      .header {
        background: #f4f4f4;
        width: 160px;
        border: 1px solid #dddddd;
        font-size: 14px;
        font-weight: 600;
        color: #666666;
      }
      section {
        padding: 16px 22px;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
      }
      .text {
        border: 1px solid #dddddd;
        border-left: none;
        width: 100%;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        /deep/.el-input__inner {
          height: 16px;
          border: none;
          padding: 0;
        }
      }
    }
  }
  .new_address {
    margin-top: 40px;
    text-align: right;
  }
  .button_box {
    text-align: right;
  }
}
</style>
